<script lang="ts" setup>
// 引入组件
import { ref, reactive } from "vue";
// 导入消息框 
import { ElMessage, ElMessageBox } from "element-plus";
// 导入api请求
import Api from "@/api";
// 引入router
import router from "@/router"; // 导入路由匹配的类
// 引入vuex的store对象
import { useStore } from "vuex";
// 获取当前实例的store对象 
const store = useStore();

// 定义数据
var Data = reactive({
  // 输入的用户名
  id: ref(""),
  // 输入的密码
  pwd: ref(""),
  // 定义验证码的imageurl
  imageUrl: ref(""),
  //================= 滑块部分 ================
  // 是否完成了滑块验证！
  slideVerifyed: ref(false),
  // 滑块的结果提示
  msg: ref(""),
  // text--滑块上的文字提示
  text: ref("向右滑动完成验证"),
  // 误差的设置 , 默认是5
  accuracy: ref(5),

});

// 获取验证码图片 s
const get_image_code = () => {
  // 获取验证码的图片
  Api.Staff.getimage().then((res) => {
    // 用接收到的二进制实例化二进制对象
    let blob = new Blob([res.data]);
    // 把当前的Blob对象实例化成路径
    let url = window.URL.createObjectURL(blob);
    // 把url的值赋给Data.imageurl
    Data.imageUrl = url;
  });
};

// 自动执行
get_image_code();

// ===== 滑块的回调函数 ==========
const onSuccess = (time: any) => {
  // 设置消息提示
  Data.msg = "验证成功！ 耗时" + (time / 1000).toFixed(1) + "秒";
  // 设置提交按钮展示
  Data.slideVerifyed = true;
};

const onFail = () => {
  // 设置消息提示
  Data.msg = "验证失败！";
};

const onRefresh = () => {
  // 设置消息提示
  Data.msg = "";
  // 设置提交按钮展示
  Data.slideVerifyed = false;
};

// 用户登陆
const login = () => {
  // 判断是否完成滑块验证
  if (!Data.slideVerifyed) {
    Data.msg = "请拖动滑块完成验证！";
    return;
  }

  // 请求
  Api.Staff.login({ id: Data.id, pwd: Data.pwd }).then((res) => {
    // 判断是否成功
    if (res.status === 200) {
      console.log(res.data.staff);
      // 写入到localstorage
      localStorage.setItem("token", res.data.token);
      // 在vuex的store对象中设置当前登录的用户
      store.commit('setStaff', res.data.staff);
      // 跳转！
      router.push({ name: "Dashboard" });
    }
  });
};
</script>
<template>
  <div class="outer">
    <div class="logincontainer">
      <el-form class="loginForm" ref="loginFormRef" :inline="false">
        <el-form-item>
          <div class="loginTitle">系统登录</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="Data.id" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="Data.pwd"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <!-- 图片验证码 
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <img :src="Data.imageUrl" @click="get_image_code" />
            </el-col>
          </el-row>
        </el-form-item>
        -->
        <el-form-item>
          <slide-verify
            :l="42"
            :r="10"
            :w="400"
            :h="160"
            ref="slideblock"
            :accuracy="Data.accuracy"
            :slider-text="Data.text"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
          >
          </slide-verify>
          <div>{{ Data.msg }}</div>
        </el-form-item>

        <el-form-item style="float: right">
          <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="12">
              <el-button class="mybtn" @click="login" type="primary" size="default"
                >登录</el-button
              >
            </el-col>
            <el-col :span="12">
              <el-button class="mybtn" size="default">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>


</template>

<style scoped>
.outer {
  height: 100%;
  width: 100%;
}

.logincontainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logincontainer .loginForm {
  height: 500px;
  width: 400px;
  border-radius: 10px;
  padding: 20px 35px;
  box-shadow: 0 0 25px #cac6c6;
}

.logincontainer .loginForm .loginTitle {
  font-size: 24px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logincontainer .loginForm .mybtn {
  width: 100%;
}
</style>
